<template>
  <div class="wish">
       <div class="title">
        <div class="p" @click="toMovies">《《</div>
        <div class="h1">预告详情</div>
    </div>
    <div class="head">
      <div class="img" v-if="wish.movie"><img :src="wish.movie.img" alt=""></div>
      <div class="right">
      <div class="titles" v-if="wish.movie">
        {{wish.movie.nm}}
      </div>
      <div class="type" v-if="wish.movie">
        {{wish.movie.cat}}
      </div>
      <div class="dd">{{wish.movie.ver}}</div>
      <div class="time" v-if="wish.movie">{{wish.movie.pubDesc}}&nbsp;{{wish.movie.pn}}分钟></div>
    </div>
    </div>
    <div class="look">
      <p>🐱猫眼想看</p>
      <div class="score">{{wish.movie.scoreLabel}}&nbsp;&nbsp;😭😭😭</div>
      <div class="renshu">{{wish.movie.wish}}人想看👀&nbsp;></div>
    </div>
    <div class="jianjie" v-if="wish.movie">{{wish.movie.shareInfo.content}}</div>

    <div class="but">
      <button>想看❤</button>
    </div>
    

  </div>
</template>

<script>
import axios from "axios";
export default {
  data(){
    return{
      wish:{},
    };
  },
  props:{
    id:{
        typeof:String,
        default:""
      }
  },
  created(){
    this.getlis();
    axios
    .get(`https://apis.netstart.cn/maoyan/movie/intro?movieId=${this.id}`)
    .then(res => {
      this.wish = res
    })
  },
   methods:{
    getlis(){
      this.axios.get(`movie/intro?movieId=${this.id}`).then((re) => {
        console.log("re===>5", re)
        this.wish = re
      })
    },
     toMovies(){
        this.$router.push( {path: '/daiying'} )
      },
    }
}
</script>

<style scoped>
.head{
  display: flex;
}
.head .img{
  padding: 10px 5px;
  flex: 2.5;
}
.right{
  padding: 10px 5px;
  flex: 7.5;
}
.right .titles{
      font-size: 26px;
      font-weight: 1em;
      color: black;
}
.right .dd{
  /* text-indent: 1em; */
  padding: 5px 0;
}
.look{
  line-height: 30px;
  padding: 5px 5px;
  width: 84%;
  color:black;
  margin: 0 auto;
  margin-top: 20px;
  border: 1px solid dimgray;
  border-radius: 10px;
}
.look p{
  margin-left: 5px;
  font-size: 23px;
}
.look .score{
  margin-left: 15px;
  font-size: 25px;
  font-weight: bolder;
  color: darkgoldenrod;
}
.look .renshu{
  font-size: 23px;
  margin-left: 15px;
}
.jianjie{
  width: 90%;
  border: 1px solid dimgray;
  color: black;
  border-radius: 10px;
  margin: 0 auto;
  margin-top: 30px;
  padding: 5px 5px;
  text-indent: 2em;
}
.but{
  /* width: 220px; */
  margin: 0 auto;
  text-align: center;

}
.but button{
  width: 100px;
  padding: 5px 5px;
  height: 40px;
  margin-top: 40px;
  background-color: rgb(32, 138, 184);
}
  .title{
        width: 100%;
        height: 50px;
        background-color:brown;
    }
    .title .h1{
        display: flex;
        justify-content: center;
        font-size: 25px;
        padding: 10px 0px;
    }
    .title .p{
        float: left;
        padding: 10px 0px;
    }
</style>